/*
    创建者：shuxiaokai
    创建时间：2021-08-30 21:01
    模块名称：折叠卡片
    备注：
*/
<template>
  <div class="collapse-card" :class="{shadow: shadow}" :style="{ width: width }">
    <header v-if="$slots.operation || title || $slots.head" :class="{disabled: disabled}" :title="disabled ? disabledTip : ''">
      <div class="head">
        <div class="control" @click="toggleCollapse">
          <template v-if="!disabled">
            <el-icon v-if="!showContent">
              <icon-care-right></icon-care-right>
            </el-icon>
            <el-icon v-else>
              <icon-care-bottom></icon-care-bottom>
            </el-icon>
          </template>
          <template v-else>
            <svg class="disabled-icon" aria-hidden="true">
              <use xlink:href="#iconweibiaoti-"></use>
            </svg>
          </template>
        </div>
        <div v-if="!$slots.head" class="title" :title="title" :style="{ color: titleColor }">{{ title }}</div>
        <slot v-else name="head">{{ title }}</slot>
      </div>
      <div v-show="!disabled" class="operation">
        <slot name="operation"></slot>
      </div>
      <div class="tail">
        <slot name="tail"></slot>
      </div>
    </header>
    <section v-show="!disabled && showContent" ref="content" class="content">
      <slot></slot>
    </section>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { CaretRight, CaretBottom } from '@element-plus/icons-vue'

export default defineComponent({
  components: {
    'icon-care-right': CaretRight,
    'icon-care-bottom': CaretBottom,
  },
  props: {
    title: { // card头部标题
      type: String,
      default: '',
    },
    width: { //宽度
      type: String,
      default: '100%',
    },
    inline: {
      type: Boolean,
      default: false,
    },
    titleColor: {
      type: String,
      default: '#444',
    },
    fold: { //默认是否折叠
      type: Boolean,
      default: false,
    },
    shadow: {
      type: Boolean,
      default: false,
    },
    disabled: { //是否禁用，禁用后内容区域不显示
      type: Boolean,
      default: false,
    },
    disabledTip: {
      type: String,
      default: '',
    },
  },
  emits: ['change'],
  data() {
    return {
      showContent: true,
    };
  },
  watch: {
    fold() {
      this.showContent = !this.fold;
    },
  },
  mounted() {
    this.showContent = !this.fold;
  },
  methods: {
    expand() {
      this.showContent = true;
    },
    toggleCollapse() {
      this.showContent = !this.showContent
      this.$emit('change', this.showContent);
    }
  },
})
</script>

<style lang="scss" scoped>
.collapse-card {
    width: 100%;
    background: $white;
    display: flex;
    flex-direction: column;
    margin-bottom: size(10);
    &.shadow {
        box-shadow: $box-shadow;
    }
    &>header {
        background: $gray-200;
        display: flex;
        align-items: center;
        height: size(40);
        // user-select: none;
        .head {
            // padding-left: size(10);
            padding-right: size(20);
            display: flex;
            align-items: center;
            height: 100%;
            min-width: size(150);
            border-right: 1px solid $gray-300;
            .control {
                width: size(40);
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                &:hover {
                    background: $gray-300;
                }
            }
        }
        .title {
            max-width: size(300);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            height: size(40);
            line-height: size(40);
        }
        .operation {
            flex: 1;
            padding: 0 size(20);
        }
        .tail {
            padding-right: size(20);
            margin-left: auto;
        }
        &.disabled {
            cursor: not-allowed;
            background: $gray-100;
            .head {
                cursor: not-allowed;
                &:hover {
                    background: none;
                }
            }
        }
    }
    .disabled-icon {
        width: size(15);
        height: size(15);
    }
    // 内容区域
    .content {
        flex: 1;
        overflow: hidden;
    }
}
</style>
